<template>
  <div class="layout">
    <Header>
        <Menu mode="horizontal" :router="true" active-name="1">
            <div class="layout-logo"></div>
            <div class="layout-nav">
                <MenuItem name="1" class="user-info" index="/measureData/1d">
                    <!-- <Icon type="ios-navigate"></Icon> -->
                    用户您好
                </MenuItem>
            </div>
        </Menu>
    </Header>
    <Container>
      <Aside :style="{background: '#fff'}">
        <Menu :router="true" width="auto">
            <Submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>测量数据</span>
              </template>
              <MenuItem name="1-3" index="/measureData/model">测量数据列表</MenuItem>
              <MenuItem name="1-4" index="/measureData/pic">图片尺寸提取</MenuItem>
            </Submenu>
            <Submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>测量设备交互</span>
                </template>
                <MenuItem name="2-1" index="/operate/index">人机交互</MenuItem>
            </Submenu>
        </Menu>
      </Aside>
      <Container>
        <router-view></router-view>
      </Container>
    </Container>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
    }
  },
  mounted: async function() {

  },
  methods: {
    logout: function() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    toggle_collapse: function() {
      this.isCollapse = !this.isCollapse
    },
    // 用于配置激活的菜单选项,存储于session中方便页面刷新的时候能保存状态
    saveNavState: function(navState) {
      window.sessionStorage.setItem('navState', navState)
      this.navState = navState
    }
  }
}
</script>

<style lang="less">
.layout{
  height: 100%;
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
    float: right;
}
.user-info{
  float: right!important;
}
</style>
